<template>
	<div class="recommange_container">
		<div class="recommange_header">
			<el-select style="width: 200px" placeholder="请选择推荐类型" v-model="searList.recommendType">
				<el-option v-for="(item,index) in recommangeType" :key="index" :label="item.name" :value="item.value" />
			</el-select>
			<el-button type="primary" icon="el-icon-search" style="margin-left: 5px;" @click='search()'>查找</el-button>
			<el-button type="primary" icon="el-icon-edit" @click='addRecommange()'>添加</el-button>
		</div>
		<el-table v-loading="loading" :data='recommendList' size="small" element-loading-text="正在查询中。。。" border fit
			highlight-current-row>
			<el-table-column align="center" label="推荐ID" prop="id" sortable />
			<el-table-column align="center" label="推荐商品" prop="spuTitle" />
			<el-table-column align="center" label="推荐类型" prop="recommendType">
				<template slot-scope="scope">
					<el-tag>{{ goodsType(scope.row.recommendType) }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button type="danger" size="mini" @click='delRecommend(scope.row)'>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="创建" :visible.sync="dialogVisible">
			<el-form ref="recommangeFrom" :rules="rules" :model="recommangeFrom" status-icon label-position="left"
				label-width="100px" style="width: 400px; margin-left:50px;">
				<el-form-item label="推荐类型" prop="recommendType">
					<el-select style="width: 200px" placeholder="请选择推荐类型" v-model="recommangeFrom.recommendType">
						<el-option v-for="(item,index) in recommangeType" :key="index" :label="item.name"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="推荐商品" prop="spuId">
					<el-cascader v-model="goodName" :options="options" placeholder="关联商品" @change="handleLink" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeDialog()">取消</el-button>
				<el-button type="primary" @click="createRecommend('recommangeFrom')">确定</el-button>
			</div>
		</el-dialog>
		<!-- 分页 -->
		<el-footer v-if="recommendList.length>0" class="border-top d-flex align-items-center px-0  bg-white"
			style="margin-top: 36px;">
			<div style="flex: 1;" class="px-2">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="searList.pageNo" :page-sizes="[10, 20, 30, 50, 100]" :page-size="searList.limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</el-footer>
	</div>
</template>

<script>
	import {
		getRecommend,
		createRecommend,
		getSpuBigTree,
		deleteRecommend
	} from '../api.js'
	export default {
		data() {
			return {
				goodName: undefined,
				searList: {
					recommendType: "",
					pageNo: 1,
					limit: 20
				},
				valueType: '', //搜索内容
				recommangeType: [{
					'name': "橱窗推荐",
					'value': 1,
				}, {
					'name': "全部",
					'value': ""
				}],
				recommangeFrom: { //表单数据
					id: undefined,
					recommendType: undefined,
					spuId: undefined,
				},
				loading: true,
				total: 1,
				recommendList: [],
				dialogVisible: false,
				rules: {
					//验证规则
					recommendType: [{
						required: true,
						message: "推荐类型",
						trigger: "blur"
					}],
					spuId: [{
						required: true,
						message: "推荐商品",
						trigger: "blur"
					}]
				},
				options: [],
			}
		},
		methods: {
			//获取数据
			getData() {
				this.loading = true;
				getRecommend(this.searList).then((res) => {
					// console.log(res.data.data)
					this.loading = false;
					this.recommendList = res.data.data.items;
					this.total = res.data.data.total;
				})
			},
			handleSizeChange(val) { //每页条数
				this.searList.limit = val
				this.getData();
			},
			handleCurrentChange(val) { //前往第几页
				this.searList.pageNo = val
				// console.log(val)
				this.getData()
			},
			// 商品类型
			goodsType(index) {
				if(index === 1){
					return "橱窗推荐"
				}
				return;
				// return this.recommangeType[index - 1]["name"];
			},
			// 搜索
			search() {
				this.searList.pageNo = 1;
				this.getData();
			},
			// 添加推荐
			addRecommange() {
				this.dialogVisible = true;
				this.recommangeFrom = {
					id: undefined,
					recommendType: undefined,
					spuId: undefined
				};
				this.goodName = undefined;
				this.$nextTick(() => {
					this.$refs["recommangeFrom"].clearValidate();
				});
			},
			createRecommend(formName) {
				// console.log(this.goodName)
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.goodName === undefined || this.goodName.length <= 3) {
							this.$message.error("请选择商品");
							return false;
						}
						createRecommend(this.recommangeFrom).then((res) => {
							console.log(res)
							if (res.data.errno == 200) {
								this.dialogVisible = false;
								this.$message.success("创建成功");
								this.getData();
							} else {
								this.dialogVisible = false;
								this.$message.error(res.data.errmsg);
								this.getData();
							}
						})
					} else {
						return false;
					}
				})
			},
			// 关闭弹框
			closeDialog() {
				this.dialogVisible = false;
			},
			// 获取商品
			getRecommendGoods() {
				getSpuBigTree().then((res) => {
					// console.log(res.data.data)
					this.options = this.getTreeData(res.data.data)
				})
			},
			// 选择时赋值spuId
			handleLink(e) {
				if (e !== undefined) {
					// console.log(e);
					let id = e[e.length - 1]; //选择最后一个
					this.recommangeFrom.spuId = id.substring(2); //截取字符串将spuId赋值
				}
			},
			// 删除
			delRecommend(value) {
				this.$confirm(
					"此操作将永久删除该商品推荐--" + value.spuTitle + "--, 是否继续?",
					"提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}
				).then(() => {
					deleteRecommend(value.recommendType, value.id).then((res) => {
						console.log(res)
						this.$message.success("删除成功");
						let index = this.recommendList.indexOf(value);
						this.recommendList.splice(index, 1);
					})
				})

			},
			// 处理数据最有一级空白无数据的问题，使用递归的方式，将最底层中的 children设为undefined
			getTreeData(data) {
				for (var i = 0; i < data.length; i++) {
					if (data[i].children.length < 1) {
						// children若为空数组，则将children设为undefined
						data[i].children = undefined;
					} else {
						// children若不为空数组，则继续 递归调用 本方法
						this.getTreeData(data[i].children);
					}
				}
				return data;
			},
		},
		created() {
			this.getData();
			this.getRecommendGoods()
		}
	}
</script>

<style>
	.recommange_container {
		width: 100%;
		height: 660px;
		overflow-x: auto;
		overflow-y: auto;
		padding: 20px;
	}

	.recommange_header {
		padding-bottom: 10px;
	}
</style>
